<template>
<!-- 对公贷款分析 -->
  <div class="content-center">
    <!-- 页面标签/页面tab -->
    <div class="content-cotainer border-box">
      <!-- 面包屑 -->
      <breadcrumb />
      <div class="big-box">
        <!-- 对公贷款分析描述 -->
        <div class="top-content">
          <div class="centent-title">
            <span>对公贷款分析</span>
          </div>
          <div class="centent-inner top-inner">对公贷款分析，按指定维度，汇总和展现商业银行对公贷款数据。</div>
        </div>

        <!-- 查询条件 -->
        <div>
          <div class="centent-title" @click="showCondition= !showCondition">
            <i
              :class="[showCondition?'el-icon-d-arrow-right rotate ':'el-icon-d-arrow-right rotate1 ']"
            ></i>
            <span class="show-box-title">查询条件</span>
          </div>
          <div class="centent-inner search-inner" v-show="showCondition">
            <div class="search-item">
              <span class="item-title must-item-title">所选银行：</span>
              <div class="select-box">
                <el-select v-model="bankValue" placeholder="请选择">
                  <el-option
                    v-for="item in bankOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </div>
            </div>
            <div class="search-item">
              <span class="item-title">频度：</span>
              <div class="select-box">
                <el-select v-model="rateValue" placeholder="请选择">
                  <el-option
                    v-for="item in rateOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </div>
            </div>
            <div class="search-item">
              <span class="item-title">时间：</span>
              <div class="select-box">
                <el-date-picker
                  v-model="timeValue"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                ></el-date-picker>
              </div>
            </div>
            <div class="search-item">
              <span class="item-title must-item-title">所选机构：</span>
              <div class="select-box">
                <el-cascader :options="orgOptions" :props="{ checkStrictly: true }" clearable></el-cascader>
              </div>
            </div>
            <div class="search-item">
              <span class="item-title must-item-title">余额：</span>
              <div class="select-box">
                <el-cascader :options="balanceOptions" :props="{ checkStrictly: true }" clearable></el-cascader>
              </div>
            </div>
            <div class="search-item">
              <span class="item-title must-item-title">单位：</span>
              <div class="select-box">
                <el-select v-model="companyValue" placeholder="请选择">
                  <el-option
                    v-for="item in companyOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </div>
            </div>
            <div class="search-item">
              <span class="item-title must-item-title">所选行业：</span>
              <div class="select-box">
                <el-cascader :options="industryOptions" :props="{ checkStrictly: true }" clearable></el-cascader>
              </div>
            </div>
            <div class="search-item">
              <span class="item-title must-item-title">企业规模：</span>
              <div class="select-box">
                <el-cascader :options="scaleOptions" :props="{ checkStrictly: true }" clearable></el-cascader>
              </div>
            </div>
            <div class="search-item">
              <span class="item-title must-item-title">贷款期限：</span>
              <div class="select-box">
                <el-cascader :options="termOptions" :props="{ checkStrictly: true }" clearable></el-cascader>
              </div>
            </div>
            <div class="search-item">
              <span class="item-title must-item-title">贷款方式：</span>
              <div class="select-box">
                <el-cascader :options="methodOptions" :props="{ checkStrictly: true }" clearable></el-cascader>
              </div>
            </div>
            <div class="search-item">
              <span class="item-title must-item-title">贷款方式：</span>
              <div class="select-box">
                <el-cascader :options="classifyOptions" :props="{ checkStrictly: true }" clearable></el-cascader>
              </div>
            </div>
            <div class="btn-box">
              <button class="btn btn-primary done-btn" @click="dialogVisible = false">
                <span>完成</span>
              </button>
              <button class="btn btn-primary done-btn" @click="dialogVisible = false">
                <span>取消</span>
              </button>
            </div>
          </div>
        </div>
        <!-- 图表展示 -->
        <div>
          <div class="centent-title" @click="showChart= !showChart">
            <i
              :class="[showChart?'el-icon-d-arrow-right rotate ':'el-icon-d-arrow-right rotate1 ']"
            ></i>
            <span class="show-box-title">图表展示</span>
          </div>
          <div class="centent-inner chart-inner" v-show="showChart">
            <div class="inner-search-box">
              <div class="inner-item">
                <span class="inner-item-title">切换模式:</span>
                <el-select v-model="modelValue" placeholder="请选择模式">
                  <el-option
                    v-for="item in modelOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </div>
              <div class="inner-item">
                <span class="inner-item-title">图表类型:</span>
                <el-cascader
                  v-model="shapeValue"
                  :options="shapeOptions"
                  @change="handleChange"
                  :show-all-levels="false"
                ></el-cascader>
              </div>
              <div class="inner-item">
                <span class="inner-item-title">X轴:</span>
                <el-select v-model="xValue" placeholder="请选择">
                  <el-option
                    v-for="item in xOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </div>
              <div class="inner-item">
                <span class="inner-item-title">Y轴:</span>
                <el-select v-model="yValue" placeholder="请选择">
                  <el-option
                    v-for="item in yOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </div>
              <button class="btn btn-primary done-btn" @click="chartDoneHandle">
                <!-- <i class="iconfont icon-search"></i> -->
                <span>生成</span>
              </button>
              <button class="btn btn-primary" @click="resetHandle">
                <!-- <i class="iconfont icon-reset"></i> -->
                <span>生成疑点</span>
              </button>
            </div>
            <div class="inner-chart-box">
              <div id="myChart" :style="{width: '1000px', height: '300px'}"></div>
            </div>
          </div>
        </div>
        <!-- 查询结果 -->
        <div>
          <div class="centent-title" @click="showResult= !showResult">
            <i
              :class="[showResult?'el-icon-d-arrow-right rotate ':'el-icon-d-arrow-right rotate1 ']"
            ></i>
            <span class="show-box-title">查询结果</span>
          </div>
          <div class="centent-inner result-inner" v-show="showResult">
            <!-- 搜索 -->
            <div class="inner-search-box">
              <button class="btn btn-primary" @click="exportHandle">
                <i class="iconfont icon-export"></i>
                <span>导出</span>
              </button>
              <button class="btn btn-primary reset-btn" @click="resetHandle">
                <i class="iconfont icon-reset"></i>
                <span>隐藏列</span>
              </button>
              <div class="search-input">
                <el-input placeholder="请输入内容" v-model="searchValue" class="input-with-select">
                  <el-button slot="append" icon="el-icon-search" @click="searchHandle"></el-button>
                  <!-- <button slot="append" class="btn btn-primary reset-btn" @click="resetHandle">
                    <i class="iconfont icon-reset"></i>
                    <span>隐藏列</span>
                  </button>-->
                </el-input>
              </div>
            </div>
            <!-- 表格 -->
            <div class="inner-table">
              <el-table
                ref="multipleTable"
                :data="tableData.slice((currPage-1)*pageSize,currPage*pageSize)"
                style="width: 100%"
                @selection-change="handleSelectionChange"
              >
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column type="index" label="序号" width="50">
                  <template slot-scope="scope">
                    <span
                      style="color:#6C8AB6;text-decoration:underline"
                      @click="goInfo(scope.row)"
                    >{{scope.$index+1}}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="orgValue" label="所选机构"></el-table-column>
                <el-table-column prop="projectName" label="菜单路径"></el-table-column>
                <el-table-column prop="time" label="操作时间"></el-table-column>
              </el-table>
            </div>
            <!-- 分页 -->
            <div class="inner-pagination">
              <el-pagination
                background
                layout="prev, pager, next"
                :current-page="currPage"
                :page-size="pageSize"
                :total="tableData.length"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
              ></el-pagination>
              <span class="pageInfo">当前第{{1}}页/每页{{pageSize}}条，共{{tableData.length}}条</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import breadcrumb from '@/components/breadcrumb'
export default {
  data() {
    return {
      showCondition: false, //是否显示查询条件
      showResult: false, //是否展示查询结果
      showChart: false, //是否显示图表

      bankValue: "", //所选银行
      bankOptions: [
        {
          value: "选项1",
          label: "建设银行"
        },
        {
          value: "选项2",
          label: "工商银行"
        },
        {
          value: "选项3",
          label: "农业银行"
        }
      ],
      rateValue: "", //频度
      rateOptions: [
        {
          value: "选项1",
          label: "按月"
        },
        {
          value: "选项2",
          label: "按周"
        },
        {
          value: "选项3",
          label: "按日"
        }
      ],
      timeValue: "", //时间
      // 所选机构
      orgOptions: [
        {
          value: "zhinan",
          label: "指南",
          children: [
            {
              value: "shejiyuanze",
              label: "设计原则",
              children: [
                {
                  value: "yizhi",
                  label: "一致"
                },
                {
                  value: "fankui",
                  label: "反馈"
                },
                {
                  value: "xiaolv",
                  label: "效率"
                },
                {
                  value: "kekong",
                  label: "可控"
                }
              ]
            }
          ]
        }
      ],
      balanceValue: "", //余额
      balanceOptions: [
        {
          value: "选项1",
          label: "余额"
        },
        {
          value: "选项2",
          label: "无"
        }
      ],
      companyValue: "", //单位
      companyOptions: [
        {
          value: "选项1",
          label: "无"
        },
        {
          value: "选项2",
          label: "某某单位"
        }
      ],
      // 所选行业
      industryOptions: [
        {
          value: "zhinan",
          label: "指南",
          children: [
            {
              value: "shejiyuanze",
              label: "设计原则",
              children: [
                {
                  value: "yizhi",
                  label: "一致"
                },
                {
                  value: "fankui",
                  label: "反馈"
                },
                {
                  value: "xiaolv",
                  label: "效率"
                },
                {
                  value: "kekong",
                  label: "可控"
                }
              ]
            }
          ]
        }
      ],
      // 企业规模
      scaleOptions: [
        {
          value: "zhinan",
          label: "指南",
          children: [
            {
              value: "shejiyuanze",
              label: "设计原则",
              children: [
                {
                  value: "yizhi",
                  label: "一致"
                },
                {
                  value: "fankui",
                  label: "反馈"
                },
                {
                  value: "xiaolv",
                  label: "效率"
                },
                {
                  value: "kekong",
                  label: "可控"
                }
              ]
            }
          ]
        }
      ],
      // 贷款期限
      termOptions: [
        {
          value: "zhinan",
          label: "指南",
          children: [
            {
              value: "shejiyuanze",
              label: "设计原则",
              children: [
                {
                  value: "yizhi",
                  label: "一致"
                },
                {
                  value: "fankui",
                  label: "反馈"
                },
                {
                  value: "xiaolv",
                  label: "效率"
                },
                {
                  value: "kekong",
                  label: "可控"
                }
              ]
            }
          ]
        }
      ],
      // 贷款期限
      methodOptions: [
        {
          value: "zhinan",
          label: "指南",
          children: [
            {
              value: "shejiyuanze",
              label: "设计原则",
              children: [
                {
                  value: "yizhi",
                  label: "一致"
                },
                {
                  value: "fankui",
                  label: "反馈"
                },
                {
                  value: "xiaolv",
                  label: "效率"
                },
                {
                  value: "kekong",
                  label: "可控"
                }
              ]
            }
          ]
        }
      ],
      // 五级分类
      classifyOptions: [
        {
          value: "zhinan",
          label: "指南",
          children: [
            {
              value: "shejiyuanze",
              label: "设计原则",
              children: [
                {
                  value: "yizhi",
                  label: "一致"
                },
                {
                  value: "fankui",
                  label: "反馈"
                },
                {
                  value: "xiaolv",
                  label: "效率"
                },
                {
                  value: "kekong",
                  label: "可控"
                }
              ]
            }
          ]
        }
      ],

      searchValue: "", //搜索框
      tableData: [
        {
          orgValue: "北京分行",
          projectName: "01 现金及存放中央银行款项",
          time: "2018/9/8"
        },
        {
          orgValue: "大连分行",
          projectName: "02 存放同业款项",
          time: "2018/9/18"
        },
        {
          orgValue: "北京总行",
          projectName: "01 现金及存放中央银行款项",
          time: "2018/9/28"
        }
      ],
      modelOptions: [
        {
          value: "选项1",
          label: "列模式"
        },
        {
          value: "选项2",
          label: "行模式"
        }
      ],
      modelValue: "", //图表模式
      shapeOptions: [
        {
          value: "erwei",
          label: "二维",
          children: [
            {
              value: "barChart",
              label: "柱状图"
            },
            {
              value: "lineChart",
              label: "折现图"
            }
          ]
        },
        {
          value: "sanwei",
          label: "三维"
        }
      ],
      shapeValue: "", //图表类型

      xOptions: [
        {
          value: "选项1",
          label: "银行",
          children: ["建行", "工行", "招商", "浦发", "邮政", "中原", "农业"]
        },
        {
          value: "选项2",
          label: "企业"
        }
      ],
      xValue: "", //x轴
      yOptions: [
        {
          value: "选项1",
          label: "汇总-期初余额"
        },
        {
          value: "选项2",
          label: "汇总-期末余额"
        }
      ],
      yValue: "", //y轴

      currPage: 1,
      pageSize: 10,

      //请求得到的信息
      chartData: {
        type1: "二维",
        type2: "line",
        chartXData: {
          name: "银行",
          children: ["建行", "工行", "招商", "浦发", "邮政", "中原", "农业"]
        },
        chartYData: {
          name: "汇总-期末余额"
        },
        chartSerData: [23000, 39000, 76000, 49000, 120000, 100009, 33000]
      }
      // 图表x轴
      // chartXData: ["建行", "工行", "招商", "浦发", "邮政", "中原", "农业"],
      // 图表y轴
      // chartYData: "",
      // chartSerData: [23000, 39000, 76000, 49000, 120000, 100009, 33000]
    };
  },
  methods: {
    resetHandle() {
      console.log("重置");
      // this.userValue = "";
      // this.funcValue = "";
      // this.logValue = "";
      // this.timeValue = "";
    },
    exportHandle() {
      // console.log(this.multipleSelection);
      console.log("导出");
    },
    searchHandle() {
      console.log("搜索");
    },
    // 点击查询
    chartDoneHandle() {
      if (this.shapeValue.includes("barChart")) {
        this.drawBar();
      } else if (this.shapeValue.includes("lineChart")) {
        this.drawLine();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleSizeChange(val) {
      this.pageSize = val;
    },
    handleCurrentChange(val) {
      this.currPage = val;
    },
    //图表类型切换
    handleChange(shapeValue) {
      console.log(shapeValue, 11111111111);
    },
    // 柱状图
    drawBar() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("myChart"));
      // 绘制图表
      myChart.setOption({
        legend: {
          data: [this.chartData.chartYData.name],
          //   orient: "vertical",
          // x轴方向的位置
          x: "left "
        },
        color: ["#0077FF"],
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          //   top: "10%"
          containLabel: true
        },
        xAxis: {
          type: "category",
          data: this.chartData.chartXData.children
        },

        yAxis: {
          type: "value"
        },
        series: [
          {
            name: this.chartData.chartYData.name,
            data: this.chartData.chartSerData,
            type: "bar"
          }
        ]
      });
    },
    // 折线图
    drawLine() {
      let myChart = this.$echarts.init(document.getElementById("myChart"));
      myChart.setOption({
        legend: {
          data: [this.chartData.chartYData.name],
          x: "left "
        },
        color: ["#0077FF"],
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          //   top: "10%"
          containLabel: true
        },
        xAxis: {
          type: "category",
          data: this.chartData.chartXData.children
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            name: this.chartData.chartYData.name,
            data: this.chartData.chartSerData,
            type: "line"
          }
        ]
      });
    }
  },
  mounted() {
    // this.drawBar();
    this.drawLine();
  },
  components:{
    breadcrumb
  }
};
</script>

<style lang="less" scoped>
.content-cotainer {
  padding: 0 20px 20px 20px;
  height: 100%;
  .big-box {
    width: 100%;
    height: calc(100vh - 175px);
    overflow-y: scroll;
  }
  .centent-title {
    box-sizing: border-box;
    i {
      color: #455f85;
      margin-left: 20px;
    }
    .show-box-title {
      margin-right: 10px;
      color: #455f85;
    }
    .rotate {
      transition: all 0.5s;
      transform: rotate(90deg);
    }
    .rotate1 {
      transform: rotate(0deg);
      transition: all 0.5s;
    }
  }
  .centent-inner {
    padding: 0 20px 20px 20px;
  }

  // 会计科目描述
  .top-inner {
    height: 145px;
    box-sizing: border-box;
    padding: 20px;
    font: 16px/24px "PingFangSC-Regular";
    color: #333333;
  }
  // 搜索内容
  .search-inner {
    width: 100%;
    // height:px;
    box-sizing: border-box;
    padding: 40px;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-self: flex-start;
    .search-item {
      width: 45%;
      height: 32px;
      margin-bottom: 40px;
      font: 14px/32px "PingFangSC-Regular";
      color: #333333;
      display: flex;
      justify-content: flex-end;
      .select-box {
        width: 370px;
        height: 32px;
        /deep/.el-input {
          width: 370px;
        }
        /deep/.el-input__inner {
          width: 370px;
          height: 32px;
        }
        /deep/.el-input__icon {
          line-height: 32px;
        }
        /deep/.el-select-dropdown__item {
          font: 14px/20px "PingFangSC-Regular";
        }
      }
      .must-item-title::before {
        content: "*";
        color: red;
        margin-right: 5px;
      }
    }
    .btn-box {
      width: 100%;
      height: 32px;
      display: flex;
      justify-content: center;
      align-items: center;
      .btn {
        width: 70px;
        margin: 0 10px;
      }
    }
  }
  //   图表内容
  .chart-inner {
    width: 100%;
    // height: 406px;
    box-sizing: border-box;
    padding: 0 45px 40px 45px;
    // 搜索模块
    .inner-search-box {
      width: 100%;
      height: 32px;
      margin: 20px 0;
      display: flex;
      flex-flow: row wrap;
      justify-content: space-between;
      align-items: flex-start;
      .inner-item {
        height: 32px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .inner-item-title {
          display: inline-block;
          margin-right: 10px;
          font: 14px/32px "PingFangSC-Regular";
          color: #333333;
        }
        /deep/.el-input {
          width: 100px;
        }
        /deep/.el-input__inner {
          width: 100px;
          height: 32px;
        }
        /deep/.el-input__icon {
          line-height: 32px;
        }
        /deep/.el-select-dropdown__item {
          font: 14px/20px "PingFangSC-Regular";
        }
      }
      .done-btn {
        width: 80px;
      }
    }
    .inner-chart-box {
      width: 100%;
      height: 300px;
      border: 1px solid #ebedf8;
    }
  }
  // 结果内容
  .result-inner {
    .inner-search-box {
      width: 100%;
      height: 32px;
      margin: 20px 0;
      display: flex;
      flex-flow: row wrap;
      justify-content: flex-start;
      align-items: flex-start;
      .search-input {
        width: 310px;
        height: 32px;
      }
      .btn {
        margin-right: 20px;
      }
      /deep/.el-input__inner {
        height: 32px;
      }
      /deep/.el-input-group__append,
      .el-input-group__prepend {
        height: 32px;
        background-color: #6c8ab6;
        border: none;
        color: #ffffff;
      }
    }

    .inner-table {
      //   复选框
      /deep/.el-checkbox__label {
        font-family: PingFangSC-Regular;
        font-size: 14px;
        color: #333333;
        padding-left: 5px;
      }

      /deep/.el-checkbox__input.is-checked .el-checkbox__inner {
        background-color: #6c8ab6;
        border-color: #6c8ab6;
      }

      /deep/.el-checkbox__input.is-checked + .el-checkbox__label {
        color: #333;
      }

      /deep/.el-checkbox__input.is-indeterminate .el-checkbox__inner {
        background-color: #6c8ab6;
        border-color: #6c8ab6;
      }
    }
  }
}
.top-content {
  margin-bottom: 20px;
}
/deep/.el-range-editor.el-input__inner {
  padding: 0 10px;
}
</style>